<template>
	<view class="main-content">
		<view class="header">
			<text class="page-font">今天状态：{{status?'已打卡':'未打卡'}}</text>
			<u-button :ripple="true" @click="colckInRecords">
				<u-icon name="list"></u-icon>打卡记录
			</u-button>
		</view>
		<u-button :ripple="true" :custom-style="clockInStyle" @click="colckIn">{{status?'已打卡':'打卡'}}</u-button>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { saveUserClockRecord, selUserClockRecord } from '../../../utils/index.js'
	export default {
		data() {
			return {
				clockInStyle: {
					width: '200rpx',
					height: '200rpx',
					borderRadius: '50%',
					backgroundImage: 'radial-gradient(#71d5a1,#71d5a1,#71d5a1)',
					color: '#F5F5F5',
					marginTop: '40rpx'
				}, 							//按钮样式
				user: uni.getStorageSync('user'),
				status: false
			}
		},
		methods: {
			// 获取工段长是否打卡
			async getcolckIn() {
				const { data } = await selUserClockRecord({jobNumber: this.user.jobNumber})
				console.log(data)
				let errMsg = data.msg
				if(data.code == '1') {
					this.status = data.data
					if(this.status){
						this.clockInStyle.backgroundImage = 'radial-gradient(#18b566,#18b566,#18b566)'
					} else {
						this.clockInStyle.backgroundImage = 'radial-gradient(#71d5a1,#71d5a1,#71d5a1)'
					}
					console.log('有无打卡',this.status)
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 工段长打卡/取消打卡
			async colckIn() {
				if(this.status) return console.log('当前已打卡')
				const { data } = await saveUserClockRecord({jobNumber: this.user.jobNumber,status: '1'})
				console.log(data)
				let errMsg = data.msg
				if(data.code == '1') {
					this.$refs.uToast.show({
						title: errMsg,
						type: 'success'
					})
					this.getcolckIn()
				} else {
					this.$refs.uToast.show({
						title: errMsg,
						type: 'error'
					})
				}
			},
			colckInRecords(){
				uni.navigateTo({
					url:'../childPage/clockInRecords'
				})
			}
		},
		// 进入页面获取是否打卡
		onLoad: function (options)  {
			this.getcolckIn()
		}
	}
</script>

<style  lang="scss" scoped>
	.main-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient();
	}
	.page-font{
		font-size: 36rpx;
		width: 100%;
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		width: 100%;
	}
	.header button{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300rpx;
		font-size: 30rpx;
		border: 0rpx !important;
	}
</style>
